<!--suppress ALL -->
<template>
  <el-container style="position: fixed;height: 100%; width: 100%">
    <el-container style="position: fixed;height: 100%;width: 100%">
      <el-aside style=" height:100%; width: 14%">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @select="handleSelect"
                 @open="handleOpen"
                 @close="handleClose">
          <div v-for="(item) in menu">
            <el-submenu :index="item.code">
              <template slot="title">
                <i :class="item.icon"></i>
                {{ item.label }}
              </template>

              <el-menu-item-group>
                <div v-for="(el) in item.children">
                  <el-menu-item :index="el.code">
                    <i :class="el.icon"></i>
                    <span slot="title">{{ el.label }}</span>
                  </el-menu-item>
                </div>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>
      </el-aside>
      <el-container style=" height:100%;">
        <el-header style="width: 86%; position: fixed; height: 60px">
          <el-dropdown trigger="click" @command="handleCommand" style="float: right; margin: 10px">
      <span class="el-dropdown-link">
        <div>
          <el-avatar :src=pic></el-avatar>
        </div>
      </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main style="width: 100%; height: 90%; margin-top: 60px">
          <router-view></router-view>
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'HomePage',
  components: {},
  data() {
    return {
      menu: this.$store.state.loginData[2],
      pic: this.$store.state.loginData[1].portrait != null ? this.$store.state.loginData[1].portrait : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      switch (index) {
        case '0100':
        case '0101':
          this.$router.push('/UaaUserPage')
          break
        case '0102':
          this.$router.push('/UaaRolePage')
          break
        case '0103':
          this.$router.push('/UaaPrivPage')
          break
        case '0104':
          this.$router.push('/UaaMenuPage')
          break
        case '0200':
        case '0201':
          this.$router.push('/FilmFastPage')
          break
        case '0300':
        case '0301':
          this.$router.push('/MediaChatPage')
          break

      }
    },
    handleCommand(command) {
      this.$store.state.loginState = '0'
      this.$router.push('/UaaLoginPage')

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  },

  mounted: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been rendered
    })
  }

}


</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  width: 100%;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;

}

.el-menu-vertical-demo {
  min-height: 100%;
}

div > a {
  color: #303133;
  text-decoration: none;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
